<template>
	<view>
		<!-- 顶部搜索框 -->
		<view class="search-box">
		  <!-- 左侧搜索盒子 -->
		  <view class="search-left">
		    <icon class="search-icon" type="search" color='#CCCCCC'></icon>
		    <input @change="numChangeHandler" @input.trim='searchHandle' v-model="kw" class="search" type="text" placeholder-style="color:#CCCCCC" placeholder="搜索您想要的职位" />
		  </view>
		  <!-- 文字 -->
		  <text class="test" @click="searchBoxHandler">筛选</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"top-bar",
		data() {
			return {
        // 搜索关键词
				kw: '',
        // 掩饰其的timeID
        timer: null
			};
		},
    methods: {
      searchBoxHandler() {
        this.$emit('click')
      },
      
      searchHandle() {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.$emit('input-change', {
            kw: this.kw
          })
          // console.log(this.kw)
        }, 500)
      }
    },
    watch: {
      kw(newValue, oldValue) {
        // 新旧内容不同
        if(newValue !== oldValue) {
          this.$emit('change', newValue)
        }
      }
    }
	}
</script>

<style lang="scss" scoped>
// 搜索框样式
  .search-box {
    margin-top: 24rpx;
    margin-left: 94rpx;
    margin-bottom: 28rpx;
    display: flex;
    align-items: center;

    .search-left {
      position: relative;
      display: flex;
      margin-right: 44rpx;

      .search-icon {
        position: absolute;
        top: 50%;
        left: 32rpx;
        transform: translateY(-50%);
        width: 36rpx;
        height: 36rpx;
        // background-color: #CCCCCC;
      }

      .search {
        box-sizing: border-box;
        width: 524rpx;
        height: 80rpx;
        padding-left: 84rpx;
        background: #FFFFFF;
        opacity: 1;
        border-radius: 60rpx;
        font-size: 24rpx;
      }
    }

    .test {
      font-weight: bold;
      color: #333333;
    }
  }
</style>
